<!doctype html>
<html>
<head>
  <title>Jot: JavaScript Object Template</title>
  <script type="text/javascript" src="jot.js"></script>
  <script type="text/javascript" src="demo_helper.js"></script>
</head>
<body>
<h1>Jot: JavaScript Object Template</h1>
<pre>
<script type="text/javascript">


var model = {
  employeesTitle:'Employees Info',
  employees:[
    {name:'Peter', mail:'peter@foo.com', level:1},
    {name:'Sam', mail:'sam@foo.com', level:2},
    {name:'Jane', mail:'jane@foo.com', level:3},
    {name:'Sarah', mail:'sarah@foo.com', level:4}
  ],
  officesTitle:'Offices Info',
  offices:[
    {name:'San Francisco', phone:'415-123-4567'},
    {name:'New York', phone:'314-233-4177'},
    {name:'Chicago', phone:'602-112-4667'}
  ],
  information:{
    revenues:{
      title:'Revenues',
      2008:'$923,456,789',
      2009:'$23,416,123'
    }
  }
};

var t1 = new Jot();

t1.a('{employeesTitle} \n')
    .each('employees')
    .a(' * ')
    .a('name : {name}').a(' | ')
    .a('mail : {mail} ')
    .a('\n').endEach();

print(t1.toString(model));

var t2 = new Jot();

t2.a('{Offices Info} \n')
    .each('offices').a(' * ')
    .each().add('{$key} : {$value}').endEach().a('\n')
    .endEach();

print(t2.toString(model));

var t3 = new Jot();
t3.each('information.revenues').a('* {$key} : {$value} \n').endEach();
print(t3.toString(model));

var t4 = new Jot();

var checkLevel = function(model) {
  return model.level <= 2;
};

t4.a('{employeesTitle} \n')
    .each('employees')
    .a(' * ')
    .a('name : {name}').a(' | ')
    .a('level : {level} ')
    .when('{level} > 2').add('(senior)').endWhen()
    .when(checkLevel).add('(junior)').endWhen()
    .a('\n').endEach();

print(t4.toString(model));

var tableModel = function() {
  var model = [];
  var row, cell, r, c;
  for (r = 0; r < 5; r++) {
    row = model[r] = [];
    for (c = 0; c < 20; c++) {
      cell = {text:'r' + r + '.c' + c};
      row.push(cell);
    }
    model.push(row);
  }
  return model;
}();

var t5 = new Jot()
    .a('<table border="1">\n')
    .each().add('<tr')
    .when('{$index}%2').add(' class="row{$index} odd"').endWhen()
    .add('>\n  ')
    .each().add('<td>{text}</td>').endEach()
    .a('\n</tr>\n').endEach()
    .a('</table>');

print(t5.toString(tableModel));


var t6 = new Jot();
t6.add('Her age is {age}')
    .when('{age} < 12').a(', under 12')
    .elseWhen('{age} < 40').a(', 12 ~ 40')
    .elseWhen('{age} < 60').a(', 40 ~ 60')
    .otherwise().add(', after 60')
    .endWhen();

print(t6.toString({age:10}));
print(t6.toString({age:30}));
print(t6.toString({age:55}));
print(t6.toString({age:70}));


var users = [
  {'name':'kelly', age: 65},
  {'name':'peter', age: 9} ,
  {'name':'sam', age: 14},
  {'name':'judy', age: 30}
];


var t7 = new Jot();
t7.add('<table border="1">')
    .a('<thead><th>name</th><th>age</th><th>category</th></thead>')
    .a('<tbody>\n')

    .each().a('<tr')// Each Row
    .not('{$index} % 2').add(' style="background:#ccc"').endNot()
    .a('>')

    .each()// Each Cell
    .a('<td>{$value}</td>')
    .endEach()

    .a('<td>')// Category cell
    .when('{age} < 20').add(' 0 ~ 20')
    .elseWhen('{age} < 40').add(' 20 ~ 40')
    .elseWhen('{age} < 60').add(' 40 ~ 60')
    .otherwise().add('60 or older')
    .endWhen()
    .a('</td>')

    .a('</tr>\n').endEach()
    .a('</tbody></table>');


print(t7.toString(users));
write(t7.toString(users));






print('Done');
</script>
</pre>
</body>
</html>